<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用户名：<input type="text" id="username" /> 密 码：<input
      type="text"
      name=""
      id="pwd"
    />
    <button id="login">登 录</button>
    <table border="1">
      <thead>
        <tr>
          <th id="tit" colspan="2"></th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <script>
    function fun() {
      var username = document.getElementById('username').value,
        password = document.getElementById('pwd').value
      var xmlHttp = new XMLHttpRequest()
      xmlHttp.open('POST', 'https://liu.zzgoodqc.cn/register')
      xmlHttp.setRequestHeader(
        'Content-type',
        'application/x-www-form-urlencoded'
      )
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          var resData = JSON.parse(xmlHttp.responseText)
          if (resData.code == 200) {
            alert(resData.msg)
          } else {
            alert(resData.msg)
          }
        }
      }
      var data =
        'username=' +
        username +
        '&password=' +
        password +
        '&email=451211111@qq.com'
      xmlHttp.send(data)
    }
    //页面加载事件
    window.onload = function () {
      login.onclick = fun
      //实例化一个请求对象
      var xmlObj = new XMLHttpRequest()
      //给对象加一些配置或者说是信息
      xmlObj.open('GET', 'https://liu.zzgoodqc.cn/hello')
      //生命返回状态得回调函数
      xmlObj.onreadystatechange = function () {
        //返回状态是4代表 请求已完成 200 http得状态代表ok
        if (xmlObj.readyState == 4 && xmlObj.status == 200) {
          //获取到返回得数据 并进行json格式转换
          var dataObj = JSON.parse(xmlObj.responseText)
          //判断数据返回是否正常
          if (dataObj.code == 0) {
            //找到对应得dom节点 添加内容
            document.getElementById('tit').innerHTML = dataObj.msg
            //找到对应得dom节点 添加内容
            var strHtml = ''
            for (let i in dataObj.data) {
              strHtml += `<tr>
                            <td>${+i + 1}</td>
                            <td>${dataObj.data[i].title}</td>
                         </tr>`
            }
            document.getElementsByTagName('tbody')[0].innerHTML = strHtml
          }
        }
      }
      //发送请求
      xmlObj.send()
    }
  </script>
</html>
